<template>
  <div class="cart">
    <van-sticky>
      <h2>购物车</h2>
      <!-- 无忧退货 -->
      <div class="commit">
        <p>
          <span class="round"></span>
          30天无忧退货
        </p>
        <p>
          <span class="round"></span>
          48小时快速退款
        </p>
        <p>
          <span class="round"></span>
          满88元免邮费
        </p>
      </div>
    </van-sticky>

    <!-- 购物车列表 -->
    <div class="card-container">
      <van-swipe-cell v-for="item in list" :key="item.id" class="card-item">
        <div class="card-show">
          <div class="checkBox">
            <van-checkbox v-model="item.ischecked"></van-checkbox>
          </div>

          <van-card class="card">
            <template #thumb>
              <img :src="item.list_pic_url" alt="" />
            </template>
            <template #title>
              <p>{{ item.goods_name }}</p>
            </template>
            <template #price>
              <p class="price">￥{{ item.retail_price }}</p>
            </template>
            <template #num>
              <van-stepper
                v-model="item.number"
                integer
                @plus="add(item)"
                @minus="reduce(item)"
                @blur="change(item, $event)"
                @focus="getNum"
                class="num"
              />
            </template>
          </van-card>
        </div>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 底部全选 -->
    <div class="footer">
      <div class="all">
        <van-checkbox v-model="isallchecked">全选</van-checkbox>
      </div>

      <p>
        合计:
        <span>￥{{ total }}</span>
      </p>
      <van-button
        round
        text="下单"
        color="#CEA62A;"
        @click="buy"
        class="anniu"
      ></van-button>
    </div>
  </div>
</template>
<script setup>
import { cart, addCart, submitAction, cartDelete } from '@/api/index'
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { showToast } from 'vant'
import 'vant/es/toast/style'
const list = ref([])
const num = ref('')
const route = useRoute()
const router = useRouter()
console.log(route)
const store = useStore()
const isallchecked = computed({
  get () {
    return list.value.every((el) => el.ischecked)
  },
  set (val) {
    list.value.forEach((el) => (el.ischecked = val))
  }
})
const total = computed(
  function () {
    return list.value.reduce((start, current) => {
      if (current.ischecked) {
        return start + current.number * current.retail_price
      } else {
        return start
      }
    }, 0)
  }
)

const init = () => {
  cart({ openId: store.state.openId }).then(res => {
    res.data.forEach((el) => (el.ischecked = false))
    list.value = res.data
  })
}
init()
const reduce = (obj) => {
  const newObj = {
    goodsId: obj.goods_id,
    number: -1,
    openId: store.state.openId
  }
  addCart(newObj)
}
const add = (obj) => {
  const newObj = {
    goodsId: obj.goods_id,
    number: 1,
    openId: store.state.openId
  }
  addCart(newObj)
}
const getNum = (e) => {
  // console.log(e.target._value);
  num.value = e.target._value
}
const change = (obj, e) => {
  addCart({
    goodsId: obj.goods_id,
    number: -num.value,
    openId: store.state.openId
  })
  addCart({
    goodsId: obj.goods_id,
    number: e.target._value,
    openId: store.state.openId
  })
}
const del = (id) => {
  cartDelete({ id: id })
  init()
}
const buy = () => {
  if (list.value.some((el) => el.ischecked)) {
    const obj = {}
    obj.allPrise = total.value
    obj.openId = store.state.openId
    const arr = []
    list.value.forEach((ele) => {
      if (ele.ischecked) {
        arr.push(ele.goods_id)
      }
    })
    const str = arr.join(',')
    obj.goodsId = str
    // console.log(obj);
    // 提交订单
    submitAction(obj)
    // 跳转到支付界面
    router.push({ name: 'pay' })
    // 删除该商品
  } else {
    showToast('请至少选择一件商品')
  }
}
</script>
<script>

export default {
  name: 'cartView'
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cart {
  background-color: #f8f8f8;
  text-align: center;
  h2 {
    padding-top: 8px;
    padding-bottom: 20px;
    background-color: #ffffff;
    font-size: 36px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    border-bottom: 1px solid #ffffff;
  }
  .commit {
    display: flex;
    width: 750px;
    height: 100px;
    justify-content: space-evenly;
    align-items: center;
    background-color: #f8f8f8;

    p {
      font-size: 24px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
      height: 33px;
      line-height: 33px;
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        border: 3px solid rgba(183, 166, 115, 1);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 14px;
      }
    }
  }
  .card-container {
    overflow: auto;
    .card-item {
      width: 710px;
      height: 253px;
      margin: 20px auto;
      background-color: #ffffff;

      .card-show {
        width: 710px;
        display: flex;
        height: 253px;
        .checkBox {
          width: 87px;
          height: 253px;
          display: flex;
          align-items: center;
          justify-content: center;
          input {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
        }
        .card {
          width: 100%;
          margin: 0px;
          overflow: hidden;
          background-color: #fff;
          img {
            width: 174px;
            height: 169px;
            margin: 42px 0 42px 0;
          }
          p {
            font-size: 30px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 400;
            height: 42px;
            line-height: 42px;
            text-align: left;
            margin-top: 37px;
          }
          .price {
            font-size: 28px;
            color: #9e4242;
            letter-spacing: 0;
            font-weight: 500;
            height: 40px;
            line-height: 40px;
            margin-top: 99px;
            text-align: left;
            float: left;
          }
          .num {
            margin-top: 99px;
            text-align: left;
            float: right;
            height: 40px;
            line-height: 40px;
          }
        }
      }
    }
  }
  .footer {
    width: 750px;
    height: 140px;
    position: fixed;
    bottom: 100px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    .all {
      font-size: 26px;
      color: #999999;
      letter-spacing: 0;
      font-weight: 400;
      margin-left: 25px;
    }
    p {
      font-size: 26px;
      color: #999999;
      letter-spacing: 0;
      font-weight: 400;
      margin-left: 200px;
      overflow: hidden;
      span {
        color: #9e4242;
        margin-left: 10px;
      }
    }
    .anniu {
      width: 193px;
      height: 72px;
      background-color: #cea62a;
      margin-left: 38px;
      border-radius: 35.75px;
    }
  }
}
.delete-button {
  height: 100%;
}
</style>
